<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse;
            width: 160px;
            border: 1px solid #ccc;
        }

        input {
            width: 152px;
        }

    </style>
</head>
<body>
<input type="text" id="wd" onkeyup="baidu()"/>
<table>
    <tbody id="tbody">

    </tbody>
</table>
</body>
</html>
<script>
    function baidu() {
        // 获取到了输入的文本框的内容
        let val = document.getElementById('wd').value;
        // 获取到tbody
        let tbody = document.getElementById('tbody');
        // 清空tbody
        tbody.innerHTML = '';
        // 循环1-9个内容
        for (let i = 1; i < 10; i++) {
            let text = val + i;
            let tr = document.createElement('tr');
            let td = document.createElement('td');
            td.innerText = text;
            tr.appendChild(td);
            tbody.appendChild(tr);
            // td添加事件
            td.onmouseover = function () {
                this.style.backgroundColor = "rgba(240,244,239,0.68)";
                this.style.color = 'blue'
            }
            td.onmouseout = function () {
                this.style.backgroundColor = "";
                this.style.color = ''
            }
            td.onclick = function () {
                document.getElementById('wd').value = this.innerText
                tbody.innerHTML = '';
            }
        }
    }
</script>